<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择仓" v-model="formInline.type">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <el-input v-model="formInline.house_name" placeholder="请输入仓库名称" style="width:140px"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.supplier" placeholder="请输入供货商" style="width:140px"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.order_id" placeholder="请输入采购单号" style="width:140px"
                        @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row show-summary sum-text="合计" :data="list" v-loading.body="listLoading" border element-loading-text="Loading"
                size="mini">
                <el-table-column align="center" prop="date" label="货单日期">
                </el-table-column>
                <el-table-column align="center" label="供货商">
                    <template slot-scope="scope">
                        <el-button type="text" @click="ditailClick(scope.row.order_id,scope.row.supplier)">
                            {{scope.row.supplier}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="store" label="仓库">
                </el-table-column>
                <el-table-column align="center" prop="order_id" label="采购订单编号">
                </el-table-column>
                <el-table-column align="center" prop="in_money" label="采购金额">
                </el-table-column>
                <el-table-column align="center" prop="pay_money_confirm" label="确认支付金额">
                </el-table-column>
                <el-table-column align="center" prop="arrive_money" label="确认到货金额">
                </el-table-column>
                <el-table-column align="center" prop="other_money" label="其他杂费">
                </el-table-column>
                <el-table-column align="center" prop="flow" label="往来金额">
                </el-table-column>
                <el-table-column align="center" label="备注">
                    <template slot-scope="scope">
                        {{scope.row.remark?scope.row.remark:'--'}}
                    </template>
                </el-table-column>
            </el-table>

            <!-- 供货商弹框 -->
            <el-dialog :close-on-click-modal="false" class="dialog_table" width="80%" title="礼品往来明细表" :visible.sync="detailDialog">
                <el-table  highlight-current-row :data="detailList" border id="exportContainer">
                    <el-table-column align="center" property="supplier" label="供应商"></el-table-column>
                    <el-table-column align="center" property="gift_id" label="礼品编号"></el-table-column>
                    <el-table-column align="center" property="gift_name" label="礼品名称"></el-table-column>
                    <el-table-column align="center" property="order_num" label="仓库下单数"></el-table-column>
                    <el-table-column align="center" property="verify_num" label="审核通过数"></el-table-column>
                    <el-table-column align="center" property="purchase_num" label="采购数"></el-table-column>
                    <el-table-column align="center" property="arrive_num" label="实际到货数"></el-table-column>
                    <el-table-column align="center" property="pay_money" label="采购单价"></el-table-column>
                    <el-table-column align="center" property="totle_money" label="采购金额"></el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" size="small" @click="exportExcel()">导出Excel</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出<count-down ref="cd"/></el-button>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getExport,
        getDetail,
    } from "@/api/storage_control/gift_collectForm";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
        data() {
            return {
                exportLoading: false,
                typeList: [{ id: 1, name: '门店仓' }, { id: '2', name: '公司仓' }],
                list: [],
                first: null,
                total: null,
                listLoading: false,
                detailDialog: false,
                detailList: [],
                formInline: {
                    supplier: '',
                    house_name: '',
                    order_id: '',
                    type: 1,
                    category_id: 101,
                    start: '',
                    end: ''
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.first) {
                    vm.first=1;
                    vm.searchClick();
                }
            })
        },
        methods: {
            // 详情弹框
            ditailClick(order_id, supplier) {
                getDetail({ order_id: order_id, supplier: supplier }).then(response => {
                    this.detailList = response[0];
                    this.detailDialog = true;
                })
            },
            // 前端导出
            exportExcel() {
                /* generate workbook object from table */
                var wb = XLSX.utils.table_to_book(document.querySelector('#exportContainer'))
                /* get binary string as output */
                var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.$route.meta.title}.xlsx`)
                } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
                return wbout
            },


            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.start = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response.list;
                    this.total = response.total;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>